<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>题目库</title>
    <link rel="icon" href="image/网页图标.png" type="image/x-icon">

    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <script src="js/top.js"></script>

    <style>
        .m1{
            width: 100%;
            height: 6%;
            background-color: #008997;
        }
        .m1 > div{
            float: right;
        }
        .m2{
            width: 100%;
            height: 40%;
            background-color: #998899;
            font-size: 30px;
        }
        .m4{
            width: 100%;
            height: 30%;
            background-color: #998899;
            font-size: 30px;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }
        .m4 > div{
            margin-right: 10%;
        }
        .m5{
            width: 100%;
            height: 6%;
            background-color: #008997;
        }
        .m6{
            width: 100%;
            height: 20%;
            background-color: #998899;
        }
        .q1{
            width: 70%;
            height: 100%;
            margin-left: 10%;
            display: flex;
            align-items: center; /* 垂直居中 */
            justify-content: center; /* 水平居中 */
        }
        .q2{
            width: 20%;
            height: 100%;
        }
        .q2 > img{
            width: 100%;
            height: 100%;
        }
        .tag1{
            margin-right: 5px;
        }
        .m41{
            width: 60%;
            height: 100%;
            margin-left: 15%;
            margin-right: 25%;
        }
        .m61{
            width: 60%;
            height: 100%;
            margin-left: 20%;
            margin-right: 20%;
            font-size: 25px;
        }
        .m51{
            margin-left: 30%;
        }
    </style>

</head>
<body>

<div id="app">
    <el-container>
        <!-- 头部 -->
        <el-header height="12%">
            <top></top>
        </el-header>
        <!-- 身体 -->
        <el-main>
<!--            加入收藏-->
            <div class="m1">
                <div>
                    <el-button type="primary" @click="add(questionAll[num]?.id)">加入收藏</el-button>
                </div>
            </div>
<!--            题目显示-->
            <div class="m2">
                <div class="q1 f">
                    <el-tag class="tag1">{{questionAll[num]?.type}}</el-tag>{{questionAll[num]?.content}}
                </div>
                <!--            图片显示-->
                <div class="q2 f">
                    <img v-if="questionAll[num]?.image && questionAll[num].image.trim() !== ''" style="width: 200px;height: 200px" :src="questionAll[num]?.image">
                </div>
            </div>
<!--            答案填写或选择-->
            <div class="m4">
                <!--        题目显示-->
                <div class="m41" v-if="questionAll[num]?.type === '填空题' && questionAll[num]?.userAnswer == ''">
                    <div v-for="n in inputCounts" :key="n">
                        <input type="text" :name="questionAll[num]?.id" placeholder="填写答案" class="f" style="width: 150px; height: 30px;margin-right: 20px;margin-bottom: 5px"/>
                    </div>
                </div>
<!--                如果已做题，渲染答案-->
                <div class="m41" v-if="questionAll[num]?.type === '填空题' && questionAll[num]?.userAnswer != ''">
                    <div v-for="(n, index) in inputCounts" :key="n">
                        <input type="text" :name="questionAll[num]?.id" :value="questionAll[num]?.userAnswer.split(';')[index] == ' ' ? '' : questionAll[num]?.userAnswer.split(';')[index]" placeholder="填写答案" class="f" style="width: 150px; height: 30px;margin-right: 20px;margin-bottom: 5px"/>
                    </div>
                </div>

                <div v-if="questionAll[num]?.type === '单选题' && questionAll[num]?.userAnswer == ''">
                    <ol type="A" class="o1">
                        <li v-for="(item, index) in questionAll[num]?.items.split(';')" :key="index">
                            <div class="custom-radio">
                                <input type="radio" :id="'radio-item-' + num + '-' + index" :value="item.replace(/^\$/, '')" :name="questionAll[num]?.id" class="hidden-radio">
                                <label :for="'radio-item-' + num + '-' + index" class="radio-label">
                                    <span class="radio-custom"></span>
                                    {{ item.replace(/^\$/, '') }}
                                </label>
                            </div>
                        </li>
                    </ol>
                </div>
                <!--                如果已做题，渲染答案-->
                <div v-if="questionAll[num]?.type === '单选题' && questionAll[num]?.userAnswer != ''">
                    <ol type="A" class="o1">
                        <li v-for="(item, index) in questionAll[num]?.items.split(';')" :key="index">
                            <div class="custom-radio">
                                <input type="radio" :checked="questionAll[num]?.userAnswer.split(';').includes(item.replace(/^\$/, ''))" :id="'radio-item-' + num + '-' + index" :value="item.replace(/^\$/, '')" :name="questionAll[num]?.id" class="hidden-radio">
                                <label :for="'radio-item-' + num + '-' + index" class="radio-label">
                                    <span class="radio-custom"></span>
                                    {{ item.replace(/^\$/, '') }}
                                </label>
                            </div>
                        </li>
                    </ol>
                </div>

                <div v-if="questionAll[num]?.type === '多选题' && questionAll[num]?.userAnswer == ''">
                    <ol type="A" class="o1">
                        <li v-for="(item, index) in questionAll[num]?.items.split(';')" :key="index">
                            <div class="custom-checkbox">
                                <input type="checkbox" :id="'checkbox-item-'+index" :value="item.replace(/^\$/, '')" :name="questionAll[num]?.id" class="hidden-checkbox">
                                <label :for="'checkbox-item-'+index" class="checkbox-label">{{ item.replace(/^\$/, '') }}</label>
                            </div>
                        </li>
                    </ol>
                </div>
                <!--                如果已做题，渲染答案-->
                <div v-if="questionAll[num]?.type === '多选题' && questionAll[num]?.userAnswer != ''">
                    <ol type="A" class="o1">
                        <li v-for="(item, index) in questionAll[num]?.items.split(';')" :key="index">
                            <div class="custom-checkbox">
                                <input type="checkbox" :checked="questionAll[num]?.userAnswer.split(';').includes(item.replace(/^\$/, ''))" :id="'checkbox-item-'+index" :value="item.replace(/^\$/, '')" :name="questionAll[num]?.id" class="hidden-checkbox">
                                <label :for="'checkbox-item-'+index" class="checkbox-label">{{ item.replace(/^\$/, '') }}</label>
                            </div>
                        </li>
                    </ol>
                </div>

                <div v-if="questionAll[num]?.type === '判断题' && questionAll[num]?.userAnswer == ''">
                    <ol type="A" class="o1">
                        <li>
                            <div class="custom-radio">
                                <input type="radio" id="radio-item-yes" value="true" :name="questionAll[num]?.id" class="hidden-radio">
                                <label for="radio-item-yes" class="radio-label">
                                    <span class="radio-custom"></span>
                                    对
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="custom-radio">
                                <input type="radio" id="radio-item-no" value="false" :name="questionAll[num]?.id" class="hidden-radio">
                                <label for="radio-item-no" class="radio-label">
                                    <span class="radio-custom"></span>
                                    错
                                </label>
                            </div>
                        </li>
                    </ol>
                </div>
                <!--                如果已做题，渲染答案-->
                <div v-if="questionAll[num]?.type === '判断题' && questionAll[num]?.userAnswer != ''">
                    <ol type="A" class="o1">
                        <li>
                            <div class="custom-radio">
                                <input type="radio" :checked="questionAll[num].userAnswer === 'true'" id="radio-item-yesme" value="true" :name="questionAll[num]?.id" class="hidden-radio">
                                <label for="radio-item-yes" class="radio-label">
                                    <span class="radio-custom"></span>
                                    对
                                </label>
                            </div>
                        </li>
                        <li>
                            <div class="custom-radio">
                                <input type="radio" :checked="questionAll[num].userAnswer === 'false'" id="radio-item-nome" value="false" :name="questionAll[num]?.id" class="hidden-radio">
                                <label for="radio-item-no" class="radio-label">
                                    <span class="radio-custom"></span>
                                    错
                                </label>
                            </div>
                        </li>
                    </ol>
                </div>

                <div v-if="questionAll[num]?.type == '问答题' && questionAll[num]?.userAnswer == ''">
                    <el-input
                            type="textarea"
                            :autosize="{ minRows: 2, maxRows: 6}"
                            placeholder="请输入内容"
                            v-model="textarea">
                    </el-input>
                </div>
            </div>
<!--            题目解析按钮，上一题，下一题-->
            <div class="m5">
                <div class="f">
                    <el-button type="primary" @click="lookOpen">答案解析</el-button>
                </div>
                <div class="f m51">
                    <el-button type="primary" plain v-if="questionAll[num]?.userAnswer == ''">未做题</el-button>
                    <el-button type="success" plain v-else-if="questionAll[num]?.isCorrect">答案正确</el-button>
                    <el-button type="danger" plain v-else-if="!questionAll[num]?.isCorrect">答案错误</el-button>
                    <el-button type="primary" @click="confirm">确认</el-button>
                </div>
                <div class="r">
                <el-button-group>
                    <el-button type="primary" icon="el-icon-arrow-left" @click="up(-1)">上一题</el-button>
                    <el-button type="primary" @click="up(1)">下一题<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                </el-button-group>
                </div>
            </div>
<!--            答案解析显示-->
            <div v-if="look" class="m6">

            </div>
            <div v-else class="m6">
                <div class="m61">{{questionAll[num]?.ideas}}</div>
            </div>
        </el-main>
    </el-container>
</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            questionAll:[],
            num: 0,
            look: true,
            textarea: '',
            status: true
        },
        created() {
            this.queryno();
        },
        methods: {
            //加入收藏
            add(qid){
                var jwt = sessionStorage.getItem("jwt");
                axios.get("cloud-other/collection/add", {
                    params: {
                        qid: qid
                    },
                    headers:{
                        Authorization: jwt
                    }
                }).then(res=>{
                    if(res.data.code == 1){
                        //收藏成功
                        this.$message(res.data.msg);
                    }else{
                        //收藏失败
                        this.$alert(res.data.msg);
                    }
                });
            },
            //打开答案解析
            lookOpen(){
                //如果未做题
                if(this.questionAll[this.num].isCorrect == null){
                    return;
                }
                this.look = false;
            },
            queryno(){
                var params = new URLSearchParams(window.location.search);
                var jwt = sessionStorage.getItem("jwt");
                axios.get("cloud-other/question/queryno",{
                    params:{
                        id: params.get("id")
                    },
                    headers:{
                        Authorization: jwt
                    }
                }).then(res=>{
                    if(res.data.code == 0){
                        this.$alert(res.data.msg);
                    }else{
                        this.questionAll = res.data.data.map(item => ({
                            ...item, // 保留原始数据的所有属性
                            userAnswer: '', // 添加用户答案字段，初始为空
                            isCorrect: null // 添加对错字段，初始为null
                        }));
                    }
                })
            },
            //上下页
            up(n){
                if(this.num + n < 0){
                    return;
                }
                if(this.num + n >= this.questionAll.length){
                    return;
                }
                this.look = true;
                this.num = this.num + n;
            },
            //判断题目对错
            confirm(){
                //如果已做题
                if(this.questionAll[this.num].isCorrect != null){
                    return;
                }
                let inputs = document.getElementsByName(this.questionAll[this.num].id);
                var params = new URLSearchParams(window.location.search);
                let answer = "";
                inputs.forEach(input =>{
                    if(input.type == "text"){
                        answer += input.value.length==0?" ":input.value;
                    }else if(input.checked){
                        answer += input.value;
                    }else{
                        answer += " ";
                    }
                    answer += ";";
                });
                //判断未选
                if(this.questionAll[this.num].type == "填空题"){
                    if(answer.match(/^[ ;]+$/)){
                        this.$alert("请填写答案");
                        return;
                    }
                    if(answer.endsWith(";")){
                        answer = answer.slice(0, -1);
                    }
                }
                if(this.questionAll[this.num].type == "单选题" || this.questionAll[this.num].type == "多选题"){
                    if(answer == " ; ; ; ;"){
                        this.$alert("请填写答案");
                        return;
                    }
                }
                if(this.questionAll[this.num].type == "判断题"){
                    if(answer == " ; ;"){
                        this.$alert("请填写答案");
                        return;
                    }
                }
                if(this.questionAll[this.num].type == "问答题"){
                    if(answer == " ;"){
                        this.$alert("请填写答案");
                        return;
                    }
                }
                //将判断题答案简化
                if(this.questionAll[this.num].type == "判断题"){
                    if(answer.includes("true")){
                        answer = "true";
                    }else if(answer.includes("false")){
                        answer = "false";
                    }
                }

                //将answer和题目id与uid和tid发送给服务器判对错
                //存入刷题表或错题集
                var jwt = sessionStorage.getItem("jwt");
                axios.get("cloud-other/question/confirm", {
                    params: {
                        answer: answer,
                        qid: this.questionAll[this.num].id,
                        tid: params.get("id")
                    },
                    headers:{
                        Authorization: jwt
                    }
                }).then(res=>{
                    if(res.data.code == -1){
                        //系统错误
                        this.$alert(res.data.msg);
                    }else if(res.data.code == 0){
                        //回答错误
                        this.questionAll[this.num].userAnswer = answer;
                        this.questionAll[this.num].isCorrect = false;
                        this.$alert(res.data.msg);
                    }else if(res.data.code == 1){
                        //回答正确
                        this.questionAll[this.num].userAnswer = answer;
                        this.questionAll[this.num].isCorrect = true;
                        this.$alert(res.data.msg);
                    }else if(res.data.code == 2){
                        //填空题回答错误
                        this.questionAll[this.num].userAnswer = answer;
                        this.questionAll[this.num].isCorrect = false;
                        if(res.data.data.length > 0){
                            inputs.forEach(input=>{
                                if (input.value && res.data.data.includes(input.value)) {
                                    // 如果input的value存在于res.data.data数组中，则修改其颜色为淡绿色
                                    input.style.color = 'lightgreen'; // 修改文字颜色
                                }
                            });
                        }
                        this.$alert(res.data.msg);
                    }else if(res.data.code == -2){
                        this.$alert(res.data.msg);
                    }
                });
            }
        },
        computed: {
            inputCounts() {
                return (this.questionAll[this.num].content.match(/_+/g) || []).length;
            },
        }
    });
</script>

<style>
    *{
        padding: 0;
        margin: 0;
    }
    html, body, #app {
        width: 100%;
        height: 100%;
        font-size: 14px;
    }
    .el-container{
        width: 100%;
        height: 100%;
    }
    .el-header{
        width: 100%;
        padding: 0%;
    }

    /* 卡片 */
    .c1{
        width: 100%;
        height: 100%;
        font-size: 35px;
    }

    /* 弹出 */
    .d1{
        width: 200px;
        height: 400px;
        position: absolute;
        z-index: 100;
        left: 10%;
    }

    /* 浮动 */
    .f{
        float: left;
    }

    .r{
        float: right;
    }

    .i1{
        position: relative;
        top: -15px;
    }

    .p1{
        margin: 8px 10px 0 10px;
        text-decoration: none;
        color: #333333;
    }
    .user{
        float: right;
        position: relative;
        left: -40px;
        top: 15px;
    }
    .custom-radio {
        position: relative;
        display: inline-block;
        margin-right: 20px; /* 根据需要调整间距 */
    }

    .custom-radio {
        position: relative;
        display: inline-block;
        margin-right: 20px; /* 根据需要调整间距 */
    }

    .hidden-radio {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        /* 注意：这里不需要改变hidden-radio的样式来移动单选框 */
    }

    .radio-label {
        cursor: pointer;
        display: block; /* 或者 inline-block，取决于你的布局需求 */
        position: relative;
        padding-left: 30px; /* 留出空间显示自定义单选按钮 */
        user-select: none; /* 防止文本被选中 */
        /* 如果需要整个label下移，可以在这里添加margin-top，但这会影响文本位置 */
    }

    .radio-label .radio-custom {
        position: absolute;
        top: 10px; /* 下移10px */
        left: 0;
        width: 20px; /* 自定义单选按钮的宽度 */
        height: 20px; /* 自定义单选按钮的高度 */
        border: 2px solid #ccc; /* 边框颜色 */
        border-radius: 50%; /* 圆形边框 */
        background-color: #fff; /* 背景颜色 */
    }

    .radio-label .radio-custom::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 10px; /* 选中标记的宽度 */
        height: 10px; /* 选中标记的高度 */
        border-radius: 50%; /* 圆形选中标记 */
        background-color: #333; /* 选中标记的颜色 */
        opacity: 0; /* 默认隐藏选中标记 */
        transition: opacity 0.2s; /* 平滑过渡效果 */
    }

    .hidden-radio:checked + .radio-label .radio-custom::after {
        opacity: 1; /* 当单选按钮被选中时显示选中标记 */
    }
    .custom-checkbox {
        position: relative;
        display: inline-block;
        margin-right: 10px; /* 根据需要调整间距 */
        cursor: pointer;
        -webkit-user-select: none; /* 禁止文本选择 */
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }

    .custom-checkbox input[type="checkbox"] {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkbox-label {
        position: relative;
        padding-left: 25px; /* 根据需要调整 */
        display: inline-block;
        line-height: 20px; /* 根据需要调整行高 */
    }

    .checkbox-label::before {
        content: "";
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 20px; /* 自定义checkbox的大小 */
        height: 20px; /* 自定义checkbox的大小 */
        border: 1px solid #ccc; /* 边框颜色 */
        background-color: #fff; /* 背景颜色 */
        border-radius: 3px; /* 边框圆角 */
    }

    .custom-checkbox input[type="checkbox"]:checked + .checkbox-label::before {
        background-color: #4CAF50; /* 选中时的背景颜色 */
        border-color: #4CAF50; /* 选中时的边框颜色 */
        content: "\2713"; /* 选中时显示的图标，这里是一个对号 */
        color: white;
        text-align: center;
        line-height: 20px; /* 图标垂直居中 */
    }

    .hidden-checkbox {
        display: none; /* 隐藏原生的checkbox */
    }
</style>

</body>
</html>